import { useState } from 'react';

export const Parent = () => {
  const [parentCount, setParentCount] = useState(0);

  // 事件处理函数
  const handleCount = () => {
    setParentCount(parentCount + 1);
  };

  return (
    <div>
      <h2>ParentCount-{parentCount}</h2>
      <button onClick={handleCount}>+1</button>
      <hr />
      <Child parentCount={parentCount}></Child>
    </div>
  );
};

const Child = (props) => {
  // 虽然父组件传入的 count 每次都变化，但是 child 的值不会每次都从 useState 函数中读取
  const [child, setChild] = useState(props.parentCount);
  console.log('父组件传入的count', props.parentCount);

  return (
    <div>
      <h3>Child</h3>
      {/* <h3>父组件传入的count-{props.parentCount}</h3> */}
      <h3>子组件使用父组件传入的count作为子组件状态-{child}</h3>
    </div>
  );
};

export default Parent;

// 例子1
export const App = () => {
  // number 类型
  const [count, setCount] = useState(0);
  console.log('函数组件执行了', count);
  const handleClick = () => {
    // 修改count
    setCount(count + 1);
  };

  return (
    <div>
      <h1>{count}</h1>

      <button onClick={handleClick}>修改数据</button>
    </div>
  );
};
